<template>
  <el-row :gutter="20" class="tag-factory-grpflter">
    <template v-if="grpFlter.length">
      <el-col :span="12" v-for="(item, index) in grpFlter" :key="index" class="map-item">
        <bar
          v-if="item.mainGrp.graphType === 'bar' || item.mainGrp.graphType === 'stack'"
          ref="factoryChart"
          :grpFlter="Object.assign({}, item, { index })"
          :editable="false"
          :grpTotal="{ grpTotal: grpTotal }"
        />
        <pie
          v-if="item.mainGrp.graphType === 'pie' || item.mainGrp.graphType === 'circle'"
          ref="factoryChart"
          :grpFlter="Object.assign({}, item, { index })"
          :editable="false"
          :grpTotal="{ grpTotal: grpTotal }"
        />
        <heat
          v-if="item.mainGrp.graphType === 'heat'"
          ref="factoryChart"
          :grpFlter="Object.assign({}, item, { index })"
          :editable="false"
          :grpTotal="{ grpTotal: grpTotal }"
        />
      </el-col>
    </template>
    <el-col :span="24" v-else class="map-item no-records" align="center">
      <img src="~@/assets/img/no_records.png" /><br />
      暂无内容
    </el-col>
  </el-row>
</template>

<script>
import bar from '@/views/modules/factory/charts/bar'
import pie from '@/views/modules/factory/charts/pie'
import heat from '@/views/modules/factory/charts/heat'
export default {
  components: { bar, pie, heat },
  props: {
    grpFlter: {
      type: Array,
      required: true,
      default: () => []
    },
    grpTotal: {
      type: Number,
      required: true,
      default: 0
    }
  },
  data() {
    return {}
  },
  methods: {
    refresh(tagReault) {
      let targets = this.$refs.factoryChart
      if (targets) {
        targets.forEach(item => {
          let index = item.grpFlter.grpId
          let profile = tagReault.profile.find(item => item.grpId === index)
          item.refreshChart(profile ? profile : { wrong: true })
        })
      }
    }
  }
}
</script>

<style lang="scss">
.tag-factory-grpflter {
  .map-item {
    margin-bottom: 10px;
  }
  .no-records {
    font-size: 18px;
    img {
      width: 200px;
      margin-bottom: 10px;
    }
  }
}
</style>
